import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    items: [{
        'checked': false,
        "image_url": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f59621b9178056b3dbc1c375567ab8f4.jpg",
        "market_price": "39",
        "num": 14,
        "price": "39",
        "product_id": "5857",
        "product_name": "小米插线板 5孔位",
        "spec_name": "颜色",
        "spec_value": "纯白色",
      },
      {
        'checked': false,
        "image_url": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1622000680.1781885.jpg",
        "market_price": "349",
        "num": 1,
        "price": "289",
        "product_id": "14243",
        "product_name": "Redmi AirDots 3 Pro",
        "spec_name": "颜色",
        "spec_value": "曜石黑",
      },
      {
        'checked': false,
        "image_url": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1601304261.24449493.jpg",
        "market_price": "99",
        "num": 5,
        "price": "99",
        "product_id": "12876",
        "product_name": "米家保温杯弹盖版",
        "salePrice": "99",
        "sel_status": 1,
        "spec_name": "颜色",
        "spec_value": "藏蓝色",
      }
    ], //购物车列表
    list: [{
      id: "1",
      name: "张三",
      tel: "13000000000",
      select: true,
      address: "河北省石家庄市长安区 文三路138号东方通信大厦7楼501室",
      isDefault: true,
      addressDetail: "文三路138号东方通信大厦7楼501室",
      areaCode: "130102",
      city: "石家庄市",
      country: "",
      county: "长安区",
      postalCode: "",
      province: "河北省",
    }, {
      id: "2",
      name: "李四",
      tel: "13000000000",
      select: false,
      address: "河北省石家庄市长安区 文三路138号东方通信大厦7楼501室",
      isDefault: false,
      addressDetail: "文三路138号东方通信大厦7楼501室",
      areaCode: "130102",
      city: "石家庄市",
      country: "",
      county: "长安区",
      postalCode: "",
      province: "河北省",
    }], //地址列表
    orderLists: [{
        "orderList": [{
          "checked": true,
          "image_url": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1601304261.24449493.jpg",
          "market_price": "99",
          "num": 5,
          "price": "99",
          "product_id": "12876",
          "product_name": "米家保温杯弹盖版",
          "salePrice": "99",
          "sel_status": 1,
          "spec_name": "颜色",
          "spec_value": "藏蓝色"
        }],
        "type": "待发货",
        "time": "2022-1-4 15:24",
        "total": 495,
        "num": 5,
        address: {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "河北省石家庄市长安区 文三路138号东方通信大厦7楼501室",
          isDefault: true,
          addressDetail: "文三路138号东方通信大厦7楼501室",
          areaCode: "130102",
          city: "石家庄市",
          country: "",
          county: "长安区",
          postalCode: "",
          province: "河北省",
        }
      },
      {
        "orderList": [{
          "checked": true,
          "image_url": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f59621b9178056b3dbc1c375567ab8f4.jpg",
          "market_price": "39",
          "num": 14,
          "price": "39",
          "product_id": "5857",
          "product_name": "小米插线板 5孔位",
          "spec_name": "颜色",
          "spec_value": "纯白色"
        }],
        "type": "待付款",
        "time": "2022-1-4 16:26",
        "total": 546,
        "num": 14,
        address: {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "河北省石家庄市长安区 文三路138号东方通信大厦7楼501室",
          isDefault: true,
          addressDetail: "文三路138号东方通信大厦7楼501室",
          areaCode: "130102",
          city: "石家庄市",
          country: "",
          county: "长安区",
          postalCode: "",
          province: "河北省",
        }
      },
      {
        "orderList": [{
          "checked": true,
          "image_url": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1622000680.1781885.jpg",
          "market_price": "349",
          "num": 1,
          "price": "289",
          "product_id": "14243",
          "product_name": "Redmi AirDots 3 Pro",
          "spec_name": "颜色",
          "spec_value": "曜石黑"
        }],
        "type": "待收货",
        "time": "2022-1-4 16:26",
        "total": 289,
        "num": 1,
        address: {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "河北省石家庄市长安区 文三路138号东方通信大厦7楼501室",
          isDefault: true,
          addressDetail: "文三路138号东方通信大厦7楼501室",
          areaCode: "130102",
          city: "石家庄市",
          country: "",
          county: "长安区",
          postalCode: "",
          province: "河北省",
        }
      }
    ],//订单列表
    history: ["小米mix4", '全部商品'], //搜索历史
  },
  mutations: {
    //添加商品数量
    add(state, index) {
      state.items[index].num += 1
    },
    //减少商品数量
    rde(state, index) {
      state.items[index].num -= 1
    },
    //删除商品
    del(state, index) {
      state.items.splice(index, 1)
    },
    //切换商品状态
    checked(state, index) {
      state.items[index].checked = !state.items[index].checked
    },
    //切换全部商品状态
    allChecked(state, checked) {
      state.items.forEach(ele => ele.checked = checked)
    },
    //添加商品进入购物车
    addItem(state, arr) {
      let index = state.items.findIndex(ele => ele.product_name == arr.product_name);
      index == -1 ? state.items.unshift(arr) : state.items[index].num += arr.num;
    },
    revList(state, arr){
      if(arr.list.isDefault){
        state.list.forEach(ele=>ele.isDefault=false)
      }
      state.list.splice(arr.index,1,arr.list)
    },
    //添加地址
    addList(state, arr) {
      if (arr.isDefault) {
        state.list.forEach(ele => ele.isDefault = false)
      }
      state.list.push(arr)
    },
    //删除地址
    delList(state, index) {
      if (state.list.length) {
        let flag = state.list[index].isDefault
        state.list.splice(index, 1)
        if (flag&&state.list[0]) {
          state.list[0].isDefault = true;
        }
      }
    },
    //修改选中地址
    revSelect(state, id) {
      let index = state.list.findIndex(ele => {
        ele.select = false;
        return ele.id == id
      })
      state.list[index].select = true;
    },
    //添加订单
    addOrder(state, arr) {
      state.orderLists.unshift(arr);
      state.items = state.items.filter(ele => !ele.checked)
    },
    //删除订单
    delOrder(state, index) {
      state.orderLists.splice(index, 1);
    },
    //修改订单
    modifyOrder(state, obj) {
      console.log(obj);
      if (obj.type !== "") {
        state.orderLists[obj.index].type = obj.type
      }
    },
    //添加历史
    addHistory(state, str) {
      let index = state.history.findIndex(ele => ele == str)
      console.log(index);
      if (index == -1) {
        state.history.unshift(str)
      } else {
        state.history.unshift(state.history.splice(index, 1)[0])
      }
    },
    //清空历史
    delHistory(state) {
      state.history.splice(0);
    },
  },
  actions: {
    change(data, arr) {
      if (arr.id) {
        let index = data.state.items.findIndex(ele => arr.id == ele.product_id);
        this.commit(arr.type, index)
      } else if (arr.newValue) {
        this.commit(arr.type, arr.newValue)
      } else {
        this.commit(arr.type, arr.info)
      }
    },
    addressList(data, arr) {
      if (arr.delete) {
        let index = data.state.list.findIndex(ele => arr.list.id == ele.id);
        this.commit(arr.type, {
          list: arr.list,
          index
        })
        return
      }
      if (arr.index !== undefined) {
        this.commit(arr.type, arr.index)
        return
      }
      this.commit(arr.type, arr.list)
    },
    addOrders(data, arr) {
      this.commit('addOrder', arr)
    },
  },
  modules: {},
  /* vuex数据持久化配置 */
  plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.localStorage,
      // 存储的 key 的key值
      // key: "store",
      // render(state) {
      //   // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
      //   return {
      //     ...state
      //   };
      // }
    })
  ],
  getters: {
    totalPrice(state) {
      return state.items.reduce((total, item) => {
        if (item.checked) {
          return total += item.price * item.num;
        } else {
          return total;
        }
      }, 0)
    }
  }
})